 <template>
  <div id="app">
    <div style="display: flex;">
      <el-select filterable :filter-method="pinyinMatch" v-model="value1" :disabled="notAllow" placeholder="请选择学院" >
        <el-option
          v-for="item in source"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>

      <el-select v-model="value2" placeholder="请选择年级">
        <el-option
          v-for="item in secondList"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>

<!--      <el-input
        placeholder="请输入分区范围"
        v-model="value4"
        clearable
        style="width: 203px;">
      </el-input> -->
      <el-select v-model="value4" placeholder="请选择年级">
        <el-option
          v-for="item in score"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>

     &nbsp;
      <div class="block" style="width: 220px; margin: 0; padding: 0;">
        <el-date-picker
          v-model="startD"
          type="datetime"
          placeholder="选择开始日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="block" style="width: 220px;  margin: 0; padding: 0;">
        <el-date-picker
          v-model="endD"
          type="datetime"
          placeholder="选择结束日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      &nbsp;
      <el-button type="primary" @click="reset()" size="small">重置</el-button>
      <el-button type="primary" @click="start()" size="small">查询</el-button>
    </div>

<!--    <el-select v-model="value3" placeholder="请选择班级">
      <el-option
        v-for="item in thirdList"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select> -->
    &nbsp;
    <br />
    <br />
    <div id="histogram" style="width: 1400px;height:800px;"></div>
    <!-- <div id="main" style="width: 800px;height:600px;margin: 0 auto;"></div> -->
  </div>
</template>

<script>
import pinyin from 'pinyin-match'
import { debounce } from '@/myUtils/debounce'
export default {
  name: 'app',
  data () {
    return {
      timeout: '',
      MapData: [],
      MapDatas: [],
      levelFirst: '',
      firstList: [],
      levelSecond: '',
      secondList: [],
      levelThird: '',
      thirdList: [],
      levelFourth: '',
      fourthList: [],
      copyDept: '',
      source: '',
      score: [2, 5, 10, 15, 20, 50],
      min: 0,
      max: 99999,
      dataList: [], // 整个树表
      erDataList: [], // 存二级表
      sanDataList: [], // 存三级表
      options: [{
        value: '大庆师范学院',
        label: '大庆师范学院'
      }],
      temp: {
        value: '',
        label: ''
      },
      value1: '', // 学院
      value2: '', // 年级
      value3: '', // 班级
      value4: 10,
      notAllow: false, // 是否允许查看信息
      v2length: 0,
      evaluate: '',
      shuju: [],
      params: {
        institute: '',
        grade: '',
        classe: '',
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        currentMoraleduPoint: 10 // 查询区间
      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      startD: '',
      endD: '',
      range: [],
      data: {
        ids: '',
        flag: ''
      },
      minRange: '',
      maxRange: ''
    }
  },
  // 当检测到value1变的时候，查询原本的dataList通过对应的位置,
  // 然后获取secondList中的值,依次类推，当监听到上一级变化的时候，后面的数据变为空
  watch: {
    startD (newname, oldname) {
      this.params.startDate = newname
      if (newname === '') {
        return
      }
      console.log()
      this.re()
      this.start()
    },
    endD (newname, oldname) {
      this.params.endDate = newname
      if (newname === '') {
        return
      }
      this.re()
      this.start()
    },
    value1 (newname, oldname) {
      // 进行重置
      this.secondList = []
      this.value2 = ''
      this.thirdList = []
      this.value3 = ''
      if (newname === ' ') {
        newname = ''
        this.params.institute = ''
        this.start()
        return
      }
      for (let k = 0; k < this.dataList.length; k++) {
        if (this.dataList[k].name === newname) { // 检测选择了哪个
          // 构建参数
          this.data.ids = this.dataList[k].parentIds + this.dataList[k].id + ','
          this.params.institute = newname
          this.start()
          // 更改选择框
          this.erDataList = this.dataList[k].children
          for (let i = 0; i < this.erDataList.length; i++) {
            this.secondList.push(this.erDataList[i].name)
          }
          return
        }
      }
    },
    value2 (newname, oldname) {
      this.v2length = this.value2.length
      this.data.flag = ''
      this.thirdList = []
      this.value3 = ''
      if (newname === ' ') {
        newname = ''
        this.params.grade = ''
        this.start()
        return
      }
      if (newname === '') {
        return
      }
      for (let w = 0; w < this.dataList.length; w++) {
        if (this.erDataList[w].name === newname) {
          // 构建参数
          this.data.ids = this.erDataList[w].parentIds + this.erDataList[w].id + ','
          this.params.grade = newname
          this.start()
          return
        }
      }
    },
    value4 (newname, oldname) {
      this.params.currentMoraleduPoint = newname
      this.start()
    }
  },
  mounted () {
    this.getTree()
  },
  methods: {
    getData () {
      return this.$http({
        url: '/graph/Graph/queryRange',
        method: 'get',
        params: {
          ...this.params
        }
      })
    },
    async start () {
      let rangeData = await this.getData()
      this.range = rangeData.data.data
      var histogramChart = this.$echarts.init(document.getElementById('histogram'))
      // data长这样
      // [0, 10, 2]
      // [10, 20, 27]
      // [20, 30, 1]
      // [30, 40, 0]
      // [40, 50, 0]
      // [50, 60, 0]
      // [60, 70, 0]
      // [70, 80, 0]
      // [80, 90, 0]
      // [90, 100, 0]
      // [100, 110, 14]
      let tempMa = this.range[this.range.length - 1]
      this.maxRange = tempMa[1]
      // 自定义渲染效果
      function renderItem (params, api) {
        // 这个根据自己的需求适当调节
        var yValue = api.value(2)
        var start = api.coord([api.value(0), yValue])
        var size = api.size([api.value(1) - api.value(0), yValue])
        var style = api.style()
        return {
          // 矩形及配置
          type: 'rect',
          shape: {
            x: start[0] + 1,
            y: start[1],
            width: size[0] - 2,
            height: size[1]
          },
          style: style
        }
      }
      var option
      option = {
        title: {
          text: this.value1 + this.value2 + '分段查询',
          left: 'center',
          top: 10
        },
        color: ['rgb(25, 183, 207)'],
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return '范围:' + params.value[0] + ' - ' + params.value[1] + '<br />' + '人数:' + params.value[2]
          },
          confine: true
        },
        grid: {
          top: 80,
          containLabel: true
        },
        xAxis: [{
          type: 'value',
          min: 0,
          max: this.maxRange,
          interval: this.currentMoraleduPoint
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'height',
          type: 'custom',
          renderItem: renderItem,
          label: {
            show: true,
            position: 'insideTop'
          },
          encode: {
            // 表示将data中的data[0]和data[1]映射到x轴
            x: [0, 1],
            // 表示将data中的data[2]映射到y轴
            y: 2,
            // 表示将data中的data[2]映射到tooltip
            tooltip: 2,
            // 表示将data中的data[2]映射到label
            label: 2
          },
          data: this.range
        }]
      }
      histogramChart.setOption(option)
    },
    // 获取当前登录用户信息
    getUserInfo () {
      this.$http({
        url: '/sys/user/info',
        method: 'get'
      }).then(({data}) => {
        if (data.success) {
          // 学院账号
          if (data.user.roleIds === '52211ea85fbe423a8f3d11c39e09dc51') {
            this.notAllow = true
            this.officeName = data.user.office.name
            this.params.institute = this.officeName
          }
          if (data.user.roleIds === '2a21eb97b6dc4b1ba64ca654d38be348') {
            this.notAllow = true
            // 辅导员老师账号
            this.officeName = data.user.office.name
            this.value1 = this.officeName
            for (let k = 0; k < this.dataList.length; k++) {
              if (this.dataList[k].name === this.officeName) { // 检测选择了哪个
                // 构建参数
                this.data.ids = this.dataList[k].parentIds + this.dataList[k].id + ','
                this.params.institute = this.officeName
                // this.start()
                // 更改选择框
                this.erDataList = this.dataList[k].children
                for (let i = 0; i < this.erDataList.length; i++) {
                  this.secondList.push(this.erDataList[i].name)
                }
              }
            }
          }
          // 刚进去时，默认查询全体的
          this.source = this.firstList
          this.$http({
            url: '/graph/Graph/allEvaluationSituation',
            method: 'post',
            data: {
              ids: '0,398dc5de2d504c429ffa83bc3ba5a988,',
              flag: ''
            },
            params: {
              institute: '',
              grade: '',
              classe: '',
              currentMoraleduPoint: this.params.currentMoraleduPoint
            }
          }).then(({data}) => {
            this.MapDatas = data.list[0]
            // this.drawChart()
          })
          this.start()
        }
      })
    },
    reset () {
      this.MapData = []
      this.shuju = []
      this.value1 = ''
      this.value2 = ''
      this.params.classe = ''
      this.params.institute = ''
      this.params.grade = ''
      this.params.currentMoraleduPoint = 10
      // this.data.ids = ''
      this.data.ids = '0,398dc5de2d504c429ffa83bc3ba5a988,'
      this.data.flag = ''
      debounce(this.start, 2000, null, this)()
    },
    pinyinMatch (val) {
      this.copyDept = this.firstList
      if (val) {
        let result = [] // 声明一个空数组保存搜索内容
        this.copyDept.forEach(e => { // 循环判断内容和拼音首字母是否匹配
          let m = pinyin.match(e, val)
          if (m) {
            result.push(e)
          }
        })
        this.source = result // 返回匹配的数组
      } else {
        this.source = this.copyDept // 未输入返回开始copy的原数组
      }
    },
    re () {
      this.shuju = []
    },
    getTree () {
      this.$http({
        url: '/sys/office/treeData',
        method: 'get'
      }).then(({data}) => {
        // 把整个子节点都存到树表中
        this.dataList = data.treeData[0].children
        this.getNext()
        this.getUserInfo()
      })
    },
    getNext () {
      this.firstList.push(' ')
      for (let i = 0; i < this.dataList.length; i++) {
        this.firstList.push(this.dataList[i].name)
      }
    }
  }
}
</script>
